<template>
  <div class="reading-progress-container">
    <div 
      class="reading-progress-bar" 
      :style="{ width: progress + '%' }"
      :class="{ 'show': progress > 0 }"
    ></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const progress = ref(0)
const isVisible = ref(false)

const calculateProgress = () => {
  const articleContent = document.querySelector('.article-content')
  if (!articleContent) return

  const articleTop = articleContent.offsetTop
  const articleHeight = articleContent.offsetHeight
  const windowHeight = window.innerHeight
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop
  
  // 计算阅读进度
  const startReading = articleTop - windowHeight
  const endReading = articleTop + articleHeight - windowHeight
  
  if (scrollTop <= startReading) {
    progress.value = 0
  } else if (scrollTop >= endReading) {
    progress.value = 100
  } else {
    progress.value = ((scrollTop - startReading) / (endReading - startReading)) * 100
  }
  
  // 当开始阅读时显示进度条
  isVisible.value = scrollTop > startReading
}

const handleScroll = () => {
  requestAnimationFrame(calculateProgress)
}

onMounted(() => {
  // 延迟执行以确保DOM完全加载
  setTimeout(() => {
    calculateProgress()
    window.addEventListener('scroll', handleScroll)
    window.addEventListener('resize', handleScroll)
  }, 100)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
  window.removeEventListener('resize', handleScroll)
})
</script>

<style scoped>
.reading-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: rgba(229, 231, 235, 0.8);
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.reading-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 50%, #10b981 100%);
  width: 0%;
  transition: width 0.3s ease-out;
  opacity: 0;
  transform: translateY(-2px);
}

.reading-progress-bar.show {
  opacity: 1;
  transform: translateY(0);
}

/* 暗色模式适配 */
:global(.dark) .reading-progress-container {
  background-color: rgba(55, 65, 81, 0.8);
}

:global(.dark) .reading-progress-bar {
  background: linear-gradient(90deg, #60a5fa 0%, #22d3ee 50%, #34d399 100%);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .reading-progress-container {
    height: 2px;
  }
}
</style>